<template>
	<view class="invite flex_c">
		<view class="content flex_c">
			<view class="inp">
				<input type="text" v-model="mobile" placeholder="请输入手机号" maxlength="11"
					placeholder-class="input_place" />
			</view>
			<view class="code flex_center">
				<input type="text" v-model="code" placeholder="请输入验证码" maxlength="6" placeholder-class="input_place" />
				<view class="btn" @click="getCode">
					{{sending ? `已发送${num}` : '获取验证码'}}
				</view>
			</view>
			<view class="sign">
				<text>手机号用于验证并绑定账号</text>
				<text style="color: red;">*</text>
			</view>

			<view class="btn" @click="onSubmit">
				确定
			</view>
		</view>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal">
				<view class="text">注册成功，是否下载app</view>
				<view class="btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view>
					<view class="item submit flex_r_around" @click="onDownLoad">
						<text>立即下载</text>
					</view>
				</view>

				<view class="icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>

		<view class="header flex_r_between" v-if="show_download">
			<view></view>

			<view class="download flex_r_around" @click="onDownLoad">
				<text>下载</text>
			</view>
		</view>

		<u-popup :show="show_outside" @close="show_outside = false" @open="onOpenOutSide" mode="top">
			<view class="openout flex_r_between">
				<view class="left">
					<image :src="$util.prefix('index/logo.png')" mode="aspectFill"></image>
					<text>安装超圈</text>
					<view class="flex_center">
						<i>点击右上角</i>
						<u-icon name="more-dot-fill" color="#666666" size="40rpx"></u-icon>
					</view>
					<view>
						<i>选择在浏览器中打开</i>
					</view>
				</view>

				<view class="right">
					<image :src="$util.prefix('index/h5_to.png')" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				pid: 0,
				mobile: '',
				code: '',

				num: 60,
				sending: false,
				circle_id: 0,

				an_url: '',
				ios_url: '',

				// 是否为微信内置浏览器
				is_micromessenger: false,

				show: false,

				show_outside: false,
				
				
				show_download: false,
				
				act: 0,
			}
		},

		onLoad(option) {
			if (option.pid) {
				this.pid = option.pid
			}
			
			if (option.circle_id) {
				this.circle_id = option.circle_id
			}
			
			if (option.act) {
				this.act = option.act
			}

			this.getDownLoadUrl();
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.is_micromessenger = true;
			} else {
				this.is_micromessenger = false;
			}
		},

		methods: {
			onSubmit() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if (!this.code) {
					return uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
				}

				this.$post('/login/register', {
					code: this.code,
					mobile: this.mobile,
					pid: this.pid,
					circle_id: this.circle_id,
					act: this.act
				},false,(res=>{
					if(res.code == 5500){
						this.show_download = true;
						this.$util.msg('您已完成注册，下载APP后可体验完整功能');
					}else {
						this.show_download = false;
						this.$util.msg(res.msg);
					}
				})).then(res => {
					this.show_download = true;
					this.show = true;
				});
			},

			getCode() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}

				this.$post('/index/sendSms', {
					mobile: this.mobile,
					scene: 102
				}).then(res => {
					this.$util.msg('已发送');
					this.afterCode()
				})
			},

			afterCode() {
				this.sending = true;
				var timer = setInterval(() => {
					this.num--;
					if (this.num == 1) {
						clearInterval(timer)
						this.num = 60;
						this.sending = false;
					}
				}, 1000)
			},

			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},

			onDownLoad() {
				if (this.is_micromessenger) {
					this.show = false;
					this.show_outside = true;
				}else {
					var type = uni.getSystemInfoSync().platform;
					if (type == 'ios') {
						window.open(this.ios_url)
					} else {
						window.open(this.an_url)
					}
				}
			},
			
			onOpenOutSide(){
				// setTimeout(()=>{
				// 	this.show_outside = false;
				// },3000);
			},
		}
	}
</script>

<style scoped lang="less">
	.invite {
		background: url('https://qiniu-cdn.maeiyun.com//h5static/circle/invite_bg.png') 0 0 no-repeat;
		background-size: 100%;
		width: 100vw;
		height: 100vh;
		background-color: #FD4545;
	}

	.bg {
		width: 100vw;
	}

	.logo {
		width: 362rpx;
		height: 250rpx;
		margin-top: 142rpx;

		image {
			width: 362rpx;
			height: 250rpx;
		}

	}

	.content {
		border-radius: 72rpx 72rpx 0 0;
		background-color: white;
		width: 100vw;
		padding: 100rpx 60rpx 70rpx;
		height: 632rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.inp {
			width: 606rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;

			input {
				width: 606rpx;
				height: 104rpx;
				padding: 0 30rpx 0;
			}
		}

		.code {
			width: 606rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			padding: 0 16rpx 0 30rpx;
			margin-top: 32rpx;

			input {
				flex: 1;
				height: 104rpx;
			}

			.btn {
				width: 208rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 52rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.sign {
			width: 606rpx;
			display: flex;
			flex-direction: row-reverse;
			margin-top: 24rpx;
			margin-bottom: 48rpx;

			text {
				font-size: 26rpx;
				color: #999999;
				line-height: 26rpx;
				text-align: right;
			}
		}

		.btn {
			width: 632rpx;
			height: 96rpx;
			background: linear-gradient(159deg, #FF548B 0%, #FD2A53 100%);
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 104rpx 44rpx 44rpx;

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.btn {
			margin-top: 42rpx;

			.item {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;

				text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.cancel {
				background: #F1F1F1;

				text {
					color: #333333;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #FFF;
			border-radius: 50%;
		}

	}

	.header {
		height: 100rpx;
		width: 100vw;
		background: rgba(255, 255, 255, .6);
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 30rpx;

		.download {
			width: 160rpx;
			height: 68rpx;
			border-radius: 44rpx;
			background: #FD2A53;

			text {
				color: #FFF;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}

	.openout {
		background: rgba(255, 255, 255, .8);
		width: 100vw;
		padding: 32rpx 64rpx 32rpx 72rpx;

		.left {
			image {
				width: 174rpx;
				height: 66rpx;
				display: block;
				margin-bottom: 20rpx;
			}

			view {
				i {
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
				}
			}

			text {
				font-size: 28rpx;
				color: #666666;
				display: block;
			}
		}

		.right {
			width: 90rpx;
			height: 188rpx;

			image {
				width: 90rpx;
				height: 188rpx;
				display: block;
			}
		}

	}
</style>